<template>
	<view class="searchBox u-flex u-flex-items-center" @click.stop="EventTarget">
		<view class="searchBoxCity u-flex u-flex-items-center" @click.stop="cityEventTarget" v-if="prop.cityIcon">
			<u-icon name="map-fill" size="15"></u-icon>
			<text class="city">{{ useLocation.location.province }}</text>
		</view>
		<u-search :placeholder="placeholder" :clearabled="true" :show-action="showAction" :disabled="prop.disabled" @custom="search"></u-search>
	</view>
</template>

<script setup lang="ts">
const useLocation = LocaStore();
const prop = defineProps({
	cityIcon: { type: Boolean, default: true },
	disabled: { type: Boolean, default: true },
	placeholder: { type: String, default: '请输入...' },
	showAction: { type: Boolean, default: false },
});

//搜索跳转
const EventTarget = () => {
	if (!prop.cityIcon) return;
	uni.navigateTo({
		url: '/goods/search',
	});
	console.log('搜索');
};

//城市切换
const cityEventTarget = () => {
	console.log('城市');
};

//触发搜索
const search = (value: any) => {
	console.log(value);
};
</script>

<style lang="scss">
.searchBox {
	.searchBoxCity {
		margin-right: $uni-spacing-row-base;
		.city {
			font-size: 26rpx;
			color: #333;
		}
	}
}
</style>
